{% extends "layout.html" %}
{% block title %}Edit Image{% endblock %}
{% block head %}
  {{ super() }}
  <link rel="stylesheet" href="{{ url_for('static', filename='css/leaflet/leaflet.css') }}">
  <link rel="stylesheet" href="{{ url_for('static', filename='css/leaflet.draw/leaflet.draw.css') }}">

  <style>
  .leaflet-container{
      height: 600px;
      width: 600px;
  }

  #annotationAccordion{
    overflow: auto;
    height: 550px;
  }

  #categorySelectionModalCategoryList{
    max-height: 550px;
    overflow: auto;
  }

  </style>
{% endblock %}
{% block modals %}
<div>
  <div class="modal fade" id="categorySelectionModal" data-backdrop="static" tabIndex="-1" role="dialog" aria-labelledby="categorySelectionModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div id="categorySelectionModalContent" class="modal-content">
      </div>
    </div>
  </div>
</div>
{% endblock %}
{% block scripts %}
{{ super() }}
<script type="text/javascript">

  var editImageData = {
    'image' : JSON.parse({{ image|tojson|safe }}),
    'annotations' : JSON.parse({{ annotations|tojson|safe }}),
    'categories' : JSON.parse({{ categories|tojson|safe }})
  };

  document.V.editImage(editImageData);

</script>


{% endblock %}